<template>
	<view class="page_wrap">
		<!-- 顶部导航 -->
		<custom-header title="统计详情" sticky />

		<!-- Tab切换 -->
		<view class="tab-bar" :style="`top:${statusBarHeight}px`">
			<view class="tab-item" :class="{ active: activeTab === 'downgrade' }" @click="switchTab('downgrade')">
				<image v-if="activeTab === 'downgrade'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">降级</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'return' }" @click="switchTab('return')">
				<image v-if="activeTab === 'return'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">退货</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'exchange' }" @click="switchTab('exchange')">
				<image v-if="activeTab === 'exchange'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">换货</text>
			</view>
		</view>

		<!-- 表格区域 -->
		<view class="table-card">
			<!-- 表格 -->
			<view class="table">
				<!-- 表头 -->
				<view class="table-row header-row">
					<text class="table-cell header-cell">花材</text>
					<text class="table-cell header-cell">货位号</text>
					<text class="table-cell header-cell">供应商</text>
					<text class="table-cell header-cell">操作</text>
				</view>
				<!-- 数据行 -->
				<view class="table-cell-wrap">
					<view class="table-row" v-for="(item, index) in currentData" :key="index">
						<view class="table-cell flower-info">
							<view class="flower-name-container">
								<text class="flower-name">{{ getFlowerBaseName(item.flowerName) }}</text>
								<text class="flower-grade">{{ getFlowerGrade(item.flowerName) }}</text>
							</view>
						</view>
						<text class="table-cell">{{ item.position }}</text>
						<view class="table-cell supplier-info">
							<text class="supplier-name">{{ item.supplier }}</text>
							<text class="quantity">数量：{{ item.quantity }}</text>
						</view>
						<view class="table-cell action-cell">
							<!-- 降级和退货显示详情按钮 -->
							<view v-if="activeTab !== 'exchange'" class="action-btn" @click="handleDetail(item)">
								<text>详情</text>
							</view>
							<!-- 换货显示状态选择 -->
							<view v-else class="status-select" @click="showStatusSelect(item, index)">
								<text v-if="item.status == 'processed'" class="processed">已处理</text>
								<text v-if="item.status == 'unprocessed'" class="unprocessed">未处理</text>
								<text v-if="item.status == 'cancelled'" class="cancelled">已取消</text>
								<text class="arrow">▼</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 状态选择组件 -->
		<custom-select :show="showSelector" :datas="statusOptions" @confirm="handleStatusConfirm"
			@update:show="handleSelectorShow" />
			
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast"
			></custom-toast>

		<!-- 确认弹窗 -->
		<view v-if="showConfirmModal" class="modal-mask" @click.self="showConfirmModal = false">
			<view class="modal-content">
				<view class="modal-title">提示</view>
				<view class="modal-message">确定要取消换货吗？</view>
				<view class="modal-buttons">
					<view class="modal-btn cancel" @click="showConfirmModal = false">取消</view>
					<view class="modal-btn confirm" @click="confirmCancel">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const statusBarHeight = computed(()=>store.getters.statusBarHeight)
	
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	const confirmToast = (data)=>{
		// 确定取消换货
		if(data?.type == 'exchange'){
			hideToast()
			confirmCancel()
		}else{
			hideToast()
		}
	}

	// 页面参数
	const pageParams = reactive({
		type: '',
		baseName: '',
		flowerName: '',
		count: 0
	})

	// 当前激活的Tab
	const activeTab = ref('downgrade')

	// 状态选择器相关
	const showSelector = ref(false)
	const statusOptions = ref(['已处理', '未处理', '取消换货'])
	const currentSelectItem = ref(null)
	const currentSelectIndex = ref(-1)

	// 确认弹窗
	const showConfirmModal = ref(false)

	// 模拟数据
	const statisticData = reactive({
		downgrade: [{
				flowerName: '蜜桃雪山(香槟)A级',
				position: '#07-099',
				supplier: '一把火花卉',
				quantity: '1扎'
			},
			{
				flowerName: '粉红雪山B级',
				position: '#03-259',
				supplier: '优质康乃馨',
				quantity: '1扎'
			},
			{
				flowerName: '蜜桃雪山(香槟)D级',
				position: '#05-234',
				supplier: '思琦鲜花',
				quantity: '3扎'
			},
			{
				flowerName: '蜜桃雪山(香槟)D级',
				position: '#05-234',
				supplier: '思琦鲜花',
				quantity: '3扎'
			},
			{
				flowerName: '蜜桃雪山(香槟)D级',
				position: '#05-234',
				supplier: '思琦鲜花',
				quantity: '3扎'
			},
			{
				flowerName: '蜜桃雪山(香槟)D级',
				position: '#05-234',
				supplier: '思琦鲜花',
				quantity: '3扎'
			}
		],
		return: [{
				flowerName: '白色康乃馨A级',
				position: '#02-156',
				supplier: '静璇花卉',
				quantity: '2扎'
			},
			{
				flowerName: '粉色玫瑰B级',
				position: '#04-267',
				supplier: '祥平花卉',
				quantity: '1扎'
			}
		],
		exchange: [{
				flowerName: '蜜桃雪山(香槟)A级',
				position: '#07-099',
				supplier: '一把火花卉',
				quantity: '1扎',
				status: 'processed' // processed: 已处理, unprocessed: 未处理, cancelled: 已取消
			},
			{
				flowerName: '粉红雪山B级',
				position: '#03-259',
				supplier: '优质康乃馨',
				quantity: '1扎',
				status: 'unprocessed'
			},
			{
				flowerName: '蜜桃雪山(香槟)D级',
				position: '#05-234',
				supplier: '思琦鲜花',
				quantity: '3扎',
				status: 'processed'
			}
		]
	})

	// 当前显示的数据
	const currentData = computed(() => {
		return statisticData[activeTab.value] || []
	})

	// 显示状态选择器
	const showStatusSelect = (item, index) => {
		console.log('选择状态项:', item, '索引:', index)
		currentSelectItem.value = item
		currentSelectIndex.value = index
		showSelector.value = true
	}

	// 处理状态确认
	const handleStatusConfirm = (selectedStatus) => {
		console.log('选择的状态:', selectedStatus)
		console.log('当前选中项:', currentSelectItem.value)
		console.log('当前选中索引:', currentSelectIndex.value)

		if (selectedStatus === '取消换货') {
			showToast({
				message:'确定要取消换货吗？',
				showCancel:true,
				data:{
					type:'exchange'
				}
			})
		} else {
			// 直接更新状态
			const statusMap = {
				'已处理': 'processed',
				'未处理': 'unprocessed'
			}
			if (currentSelectItem.value && currentSelectIndex.value >= 0) {
				// 同时更新引用和数据源
				const targetItem = statisticData.exchange[currentSelectIndex.value]
				if (targetItem) {
					targetItem.status = statusMap[selectedStatus]
					console.log('数据源更新为:', targetItem.status)
				}
				currentSelectItem.value.status = statusMap[selectedStatus]
				console.log('引用更新为:', currentSelectItem.value.status)
			}
			// 显示成功提示
			// showToast('处理成功')
		}
	}

	// 确认取消换货
	const confirmCancel = () => {
		console.log('确认取消换货')
		console.log('当前选中项:', currentSelectItem.value)
		console.log('当前选中索引:', currentSelectIndex.value)

		if (currentSelectItem.value && currentSelectIndex.value >= 0) {
			// 直接更新数据源中的对象
			const targetItem = statisticData.exchange[currentSelectIndex.value]
			if (targetItem) {
				targetItem.status = 'cancelled'
				console.log('数据源状态设置为已取消:', targetItem)
			}
			// 同时更新引用
			currentSelectItem.value.status = 'cancelled'
			console.log('引用状态设置为已取消:', currentSelectItem.value)
		}

		showConfirmModal.value = false

		// 显示取消成功提示
		setTimeout(()=>{
			showToast('已取消换货')
		},300)
	}

	// 处理选择器显示状态
	const handleSelectorShow = (show) => {
		showSelector.value = show
	}

	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options

		pageParams.type = options.type || 'downgrade'
		pageParams.baseName = options.baseName || ''
		pageParams.flowerName = options.flowerName || ''
		pageParams.count = parseInt(options.count || 0)

		// 设置初始Tab
		activeTab.value = pageParams.type
	})

	// 切换Tab
	const switchTab = (tab) => {
		activeTab.value = tab
	}
	

	// 查看详情
	const handleDetail = (item) => {
		uni.navigateTo({
			url:'/pages/statisticOperation/statisticOperation'
		})
	}

	// 获取花材基础名称
	const getFlowerBaseName = (name) => {
		// 分割花材名称，去掉等级部分
		const gradeRegex = /[A-Z]级$/
		if (gradeRegex.test(name)) {
			return name.replace(gradeRegex, '')
		}
		return name
	}

	// 获取花材等级
	const getFlowerGrade = (name) => {
		// 提取等级部分
		const gradeMatch = name.match(/[A-Z]级$/)
		return gradeMatch ? gradeMatch[0] : ''
	}
</script>

<style lang="scss">
	.page_wrap {
		min-height: 100vh;
		background: #fff;

		// Tab栏
		.tab-bar {
			background: #ffffff;
			display: flex;
			position: sticky;
			top: 100;

			.tab-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.tab-icon {
					// position: absolute;
					// top: 16rpx;
					// left: 50%;
					// transform: translateX(-35rpx);
					// width: 20rpx;
					// height: 20rpx;
					// z-index: 2;
					width: 27.5rpx;
					height: 25rpx;
					transform: translateX(10rpx) translateY(-16rpx);
				}

				.tab-text {
					font-size: 28rpx;
					color: #999;
				}

				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: #f5564d;
					border-radius: 2rpx;
				}

				&.active .tab-text {
					color: #333;
					font-weight: 600;
				}
			}
		}

		// 表格卡片
		.table-card {
			margin: 24rpx;
			background: #ffffff;
			border-radius: 20rpx;
			// padding: 30rpx;
			// box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

			.table {
				.table-row {
					display: flex;
					align-items: center;

					&.header-row {
						background: #F5F7F9;
						border-radius: 12rpx;
						margin-bottom: 10rpx;
						padding: 20rpx 0;

						.header-cell {
							color: #333333;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							&:nth-child(1) {
								flex: 2;
								text-align: left;
								padding-left: 20rpx;
								justify-content: flex-start;
							}

							&:nth-child(2) {
								flex: 1.2;
							}

							&:nth-child(3) {
								flex: 1.5;
							}

							&:nth-child(4) {
								flex: 1;
							}
						}
					}

					&:not(.header-row) {
						border-bottom: 1px solid #f5f5f5;
						padding: 12rpx 0;

						&:last-child {
							border-bottom: none;
						}
					}

					.table-cell {
						text-align: center;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;

						&:nth-child(1) {
							flex: 2;
							text-align: left;
							padding-left: 20rpx;
							justify-content: flex-start;
						}

						&:nth-child(2) {
							flex: 1.2;
						}

						&:nth-child(3) {
							flex: 1.5;
						}

						&:nth-child(4) {
							flex: 1;
						}

						&.flower-info {
							flex: 2;
							text-align: left;
							padding-left: 20rpx;
							justify-content: flex-start;

							.flower-name-container {
								display: flex;
								align-items: center;
								gap: 4rpx;
								width: 100%;

								.flower-name {
									color: #333333;
									font-weight: bold;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									// flex: 1;
									min-width: 0;
									max-width: calc(100% - 60rpx);
								}

								.flower-grade {
									color: #F5564D;
									font-size: 24rpx;
									font-weight: bold;
									white-space: nowrap;
									flex-shrink: 0;
									margin-left: 4rpx;
								}
							}
						}

						&.supplier-info {
							flex: 1.5;
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 8rpx;

							.supplier-name {
								color: #333333;
							}

							.quantity {
								color: #999999;
								font-size: 22rpx;
							}
						}

						&.action-cell {
							flex: 1;

							.action-btn {
								display: inline-block;
								padding: 8rpx 20rpx;
								background: transparent;
								color: #5786FF;
								border-radius: 6rpx;
								font-size: 24rpx;
								cursor: pointer;
							}

							.status-select {
								display: flex;
								align-items: center;
								justify-content: center;
								gap: 4rpx;
								cursor: pointer;
								padding: 4rpx 8rpx;
								border-radius: 6rpx;
								white-space: nowrap;
								min-width: 80rpx;

								.processed {
									// color: #52c41a;
									white-space: nowrap;
								}

								.unprocessed {
									color: #f5564d;
									white-space: nowrap;
								}

								.cancelled {
									color: #999999;
									white-space: nowrap;
								}

								.arrow {
									font-size: 16rpx;
									color: #999999;
									margin-left: 2rpx;
								}
							}
						}
					}
				}
				.table-cell-wrap{
					border: 1px solid #F2F2F2;
					border-radius: 12rpx;
				}
			}
		}

		// 确认弹窗样式
		.modal-mask {
			position: fixed;
			z-index: 9999;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.modal-content {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 60rpx 40rpx 40rpx 40rpx;
			margin: 0 40rpx;
			min-width: 500rpx;
			text-align: center;
		}

		.modal-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.modal-message {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 50rpx;
			line-height: 1.5;
		}

		.modal-buttons {
			display: flex;
			gap: 30rpx;
		}

		.modal-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			cursor: pointer;

			&.cancel {
				background: transparent;
				color: #f5564d;
				border: 1px solid #f5564d;
			}

			&.confirm {
				background: #f5564d;
				color: #ffffff;
			}
		}
	}
</style>